<template>
  <div
    class="mouse-warp"
    :style="{
      width: width,
      height: height,
      color: color,
      backgroundColor: background,
    }"
    ref="warp"
    @mouseenter="onMouseEnter"
    @mouseleave="onMouseLeave"
  >
    <div
      class="cover"
      :style="{ backgroundColor: coverBackground }"
      ref="cover"
    >
      <slot name="cover"></slot>
    </div>
    <div class="content">
      <slot name="content"></slot>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import "./mouse-wrap.scss";
export default {
  name: "Moueswrap",
  props: {
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    color: {
      type: String,
      default: "#000",
    },
    background: {
      type: String,
      default: "#fff",
    },
    coverBackground: {
      type: String,
      default: "rgba(0,0,0,0.3)",
    },
  },
  setup(props) {
    const state = reactive({
      curData: {},
    });

    let warp = ref(null),
      cover = ref(null),
      dirName = new Array("top", "right", "bottom", "left");

    function onMouseEnter(e) {
      let _this = e.currentTarget;
      let cover = _this.querySelector(".cover");
      let w = _this.offsetWidth;
      let h = _this.offsetHeight;
      let toTop =
        _this.getBoundingClientRect().top + document.documentElement.scrollTop; //兼容滚动条

      let x =
        (e.pageX - _this.getBoundingClientRect().left - w / 2) *
        (w > h ? h / w : 1); //获取当前鼠标的x轴位置
      let y = (e.pageY - toTop - h / 2) * (h > w ? w / h : 1);
      //上面对长方形也做了兼容，也就是按照最小的那个边的一半作为半径了
      //例如有一个宽6，高是2的矩形 右上角的坐标就是{x:3,y:1}，经过上面的计算后{x:2/6 * 3,y:1}=》{x:1,y:1}   算出来也就是45°的样子
      //如果是正方形，可以去掉后面的系数（w>h && h>w）
      let direction =
        Math.round(((Math.atan2(y, x) * 180) / Math.PI + 180) / 90 + 3) % 4; //direction的值为“0,1,2,3”分别对应着“上，右，下，左”

      let dirText = dirName[direction];
      // 通过移入方位，添加移入动画class
      switch (dirText) {
        case "top":
          cover.setAttribute("class", "cover topEnter");
          break;
        case "right":
          cover.setAttribute("class", "cover rightEnter");
          break;
        case "bottom":
          cover.setAttribute("class", "cover bottomEnter");
          break;
        case "left":
          cover.setAttribute("class", "cover leftEnter");
          break;
        default:
          break;
      }
    }
    function onMouseLeave(e) {
      let _this = e.currentTarget;
      let cover = _this.querySelector(".cover");
      let w = _this.offsetWidth;
      let h = _this.offsetHeight;
      let toTop =
        _this.getBoundingClientRect().top + document.documentElement.scrollTop; //兼容滚动条
      let x =
        (e.pageX - _this.getBoundingClientRect().left - w / 2) *
        (w > h ? h / w : 1); //获取当前鼠标的x轴位置
      let y = (e.pageY - toTop - h / 2) * (h > w ? w / h : 1);
      //上面对长方形也做了兼容，也就是按照最小的那个边的一半作为半径了
      //例如有一个宽6，高是2的矩形 右上角的坐标就是{x:3,y:1}，经过上面的计算后{x:2/6 * 3,y:1}=》{x:1,y:1}   算出来也就是45°的样子
      //如果是正方形，可以去掉后面的系数（w>h && h>w）
      let direction =
        Math.round(((Math.atan2(y, x) * 180) / Math.PI + 180) / 90 + 3) % 4; //direction的值为“0,1,2,3”分别对应着“上，右，下，左”
      let dirText = dirName[direction];
      // 通过移入方位，添加移出动画class
      switch (dirText) {
        case "top":
          cover.setAttribute("class", "cover topLeave");
          break;
        case "right":
          cover.setAttribute("class", "cover rightLeave");
          break;
        case "bottom":
          cover.setAttribute("class", "cover bottomLeave");
          break;
        case "left":
          cover.setAttribute("class", "cover leftLeave");
          break;
        default:
          break;
      }
    }
    return {
      ...toRefs(state),
      warp,
      cover,
      onMouseEnter,
      onMouseLeave,
    };
  },
};
</script>

<style>
</style>